<template>
	<view class="body">
		<view class="images">
			<image-upload @change="imageChange" :list="imageList" />
		</view>
		<view class="order">
			<view class="order-list">
				<view class="order-item">
					<view class="order-item-left">
						<text>快递单号</text>
					</view>
					<view class="order-item-right">
						<view class="input">
							<input type="text" v-model="goodsInfo.logistics_number" placeholder="请输入快递单号" placeholder-style="color:#999;font-size:28rpx;font-weight: 500;">
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-left">
						<text>总件数</text>
					</view>
					<view class="order-item-right">
						<view class="input">
							<input type="number" v-model="goodsInfo.good_size" placeholder="请输入总件数" placeholder-style="color:#999;font-size:28rpx;font-weight: 500;">
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-left">
						<text>品名</text>
					</view>
					<view class="order-item-right">
						<view class="input">
							<input type="text" @input="goodsQuantityInput" v-model="goodsInfo.good_quantity" placeholder="请输入品名" placeholder-style="color:#999;font-size:28rpx;font-weight: 500;">
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-left">
						<text>数量</text>
					</view>
					<view class="order-item-right">
						<view class="input">
							<input type="number" v-model="goodsInfo.good_number" placeholder="请输入数量" placeholder-style="color:#999;font-size:28rpx;font-weight: 500;">
						</view>
					</view>
				</view>
				<view class="order-item">
					<view class="order-item-left">
						<text>货物类型</text>
					</view>
					<view class="order-item-right">
						<view class="order-right-select">
							<view class="select-text" :style="goodsInfo.good_type ? 'color: #333;font-weight: bold;' : ''">
								<text>{{ goodsInfo.good_type || '请先输入品名'}}</text>
							</view>
							<view class="select-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="choice">
			<picker mode="selector" :range="warehouseList" range-key="name" @change="warehouseChange">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>仓库选择</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="selectedWarehouse.warehouse_id ? 'color: #333;font-weight: bold;' : ''">
							<text>{{selectedWarehouse.name || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :range="transTypeList" range-key="name" @change="transTypeChange">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>运输方式</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="selectedTransType.id ? 'color: #333;font-weight: bold;' : ''">
							<text>{{selectedTransType.name || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</picker>
			
			<picker mode="selector" :disabled="channelDisabled" @click="channelSelectTap" :range="channelList" range-key="name" @change="channelChange">
				<view class="choice-item">
					<view class="choice-item-left">
						<text>渠道选择</text>
					</view>
					<view class="choice-item-right">
						<view class="right-title" :style="selectedChannel.channel_id ? 'color: #333;font-weight: bold;' : ''">
							<text>{{selectedChannel.name || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</picker>
		</view>
		<view class="top">
			<view class="top-item" style="padding-top: 14rpx;" @click="selectAddress('collect')">
				<view class="item-top">
					<view class="item-top-left">
						<view class="item-icon">
							<image src="/static/images/collect.png" mode="widthFix"></image>
						</view>
						<view class="item-name" v-if="collectPeople.consignee">
							<text>{{collectPeople.consignee || ''}}  {{collectPeople.mobile || ''}}</text>
						</view>
					</view>
					<view class="item-top-right">
						<view class="right-icon">
							<image src="/static/images/address-book.png" mode="widthFix"></image>
						</view>
						<view class="right-title">
							<text>地址库</text>
						</view>
					</view>
				</view>
				<view class="item-center">
					<view class="center-detail">
						<view class="center-address" v-if="collectPeople.consignee">
							<text>{{collectPeople.province || ''}} {{collectPeople.city || ''}} {{collectPeople.district || ''}} {{collectPeople.address || ''}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-top">
				<view class="list-top-left">
					<view class="top-text">
						<text>进口报关</text>
					</view>
					<view class="top-image">
						<image src="/static/images/ask.png" @click="helpShow = true" mode="widthFix"></image>
					</view>
				</view>
				<view class="list-top-right">
					<view class="select" @click="declarationChange(2)">
						<view class="select-icon">
							<image :src="formData.declaration == 2 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="formData.declaration == 2 ? 'color: #333;font-weight: bold;' : ''">
							<text>包税</text>
						</view>
					</view>
					<view class="select" @click="declarationChange(1)">
						<view class="select-icon">
							<image :src="formData.declaration == 1 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="formData.declaration == 1 ? 'color: #333;font-weight: bold;' : ''">
							<text>不包税</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list-help">
				<view class="top-help-mask" v-if="helpShow" @click="helpShow = false"></view>
				<view class="help-content" v-if="helpShow">
					<image src="/static/images/help.png" mode="widthFix"></image>
					<view class="help-title">
						<text>提示</text>
					</view>
					<view class="help-item">
						<view class="help-left">
							<text>不包税：</text>
						</view>
						<view class="help-right">
							<text>缔惠做报关，税金客户支付</text>
						</view>
					</view>
					<view class="help-item">
						<view class="help-left">
							<text>简易报关：</text>
						</view>
						<view class="help-right">
							<text>需提供委任书，商业发票，装箱单，货值不能超过50000台币，超过要改做正式报关，不收取报关费</text>
						</view>
					</view>
					<view class="help-item">
						<view class="help-left">
							<text>正式报关：</text>
						</view>
						<view class="help-right">
							<text>需提供委任书，商业发票，装箱单，收取报关费500台币</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list-label" v-if="formData.declaration == 1">
				<view class="label-item" :style="formData.declaration_list == item.key?'border: 2rpx solid #E6201A;color: #E6201A;':''" v-for="(item,index) in declarationList" :key="index" @click="declarationListChange(item)">
					<text>{{item.title}}</text>
					<image v-if="formData.declaration_list == item.key" class="label-select" src="/static/images/label-select.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="list-top" v-if="formData.declaration == 1">
				<view class="list-top-left">
					<view class="top-text">
						<text>税金支付方式</text>
					</view>
				</view>
				<view class="list-top-right">
					<view class="select" @click="declarationrowChange(1)">
						<view class="select-icon">
							<image :src="declarationrow == 1 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="declarationrow == 1 ? 'color: #333;font-weight: bold;' : ''">
							<text>税金起付</text>
						</view>
					</view>
					<view class="select" @click="declarationrowChange(2)">
						<view class="select-icon">
							<image :src="declarationrow == 2 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="declarationrow == 2 ? 'color: #333;font-weight: bold;' : ''">
							<text>税金到付</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">
					<text>代收款向</text>
				</view>
				<view class="list-item-right">
					<view class="input">
						<input type="number" v-model="formData.acting_mat_fee" :placeholder="newPlaceholder" placeholder-style="color:#999;font-size:28rpx;">
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="list-item-left">
					<text>附加服务</text>
				</view>
				<view class="list-item-right">
					<view class="right-centent" @click="popupShow = true">
						<view class="right-text" :style="additionalSelectedTitle ? 'color: #333;font-weight: bold;' : ''">
							<text>{{additionalSelectedTitle || '请选择'}}</text>
						</view>
						<view class="right-icon">
							<image src="/static/images/right1.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="item-pay">
				<view class="pay-left">
					<text>支付方式</text>
				</view>
				<view class="pay-right">
					<view class="pay-btn" :class="{active: selectPayTypeName == item.pay_name}" v-for="(item, index) in payTypeList" :key="index" @click="payTypeSelect(item)">
						<text>{{item.pay_name || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="list">
			<view class="list-item">
				<view class="list-item-left">
					<text>收件人上下班时间</text>
				</view>
				<view class="list-item-right">
					<view class="input">
						<input type="text" v-model="formData.send" placeholder="请输入" placeholder-style="color:#999;font-size:28rpx;">
					</view>
				</view>
			</view>
		</view> -->
		
		<view class="list">
			<view class="list-item">
				<view class="list-item-left">
					<text>请在下方选择收件人的收货时间</text>
				</view>
			</view>
			<view class="list-top" >
				<view class="list-top-left">
					<view class="top-text">
						<text>无人签收放门口拍照</text>
					</view>
				</view>
				<view class="list-top-right">
					<view class="select" @click="takePhotoChange(1)">
						<view class="select-icon">
							<image :src="workTime.takePhoto == 1 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="workTime.takePhoto == 1 ? 'color: #333;font-weight: bold;' : ''">
							<text>是</text>
						</view>
					</view>
					<view class="select" @click="takePhotoChange(2)">
						<view class="select-icon">
							<image :src="workTime.takePhoto == 2 ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix"></image>
						</view>
						<view class="select-title" :style="workTime.takePhoto == 2 ? 'color: #333;font-weight: bold;' : ''">
							<text>否</text>
						</view>
					</view>
				</view>
				
			</view>
			<picker mode="selector" :range="weekList" range-key="title" :data-type="1" @change="workTimeChange">
					<view class="choice-item">
						<view class="choice-item-left">
							<text>收货工作日起始日</text>
						</view>
						<view class="choice-item-right">
							<view class="right-title" :style="workTime.getStartDay ? 'color: #333;font-weight: bold;' : ''">
								<text>{{workTime.getStartDay || '请选择'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
			</picker>
			
			<picker mode="selector" :range="weekList" range-key="title" :data-type="2" @change="workTimeChange">
					<view class="choice-item">
						<view class="choice-item-left">
							<text>收货工作日结束日</text>
						</view>
						<view class="choice-item-right">
							<view class="right-title" :style="workTime.getEndDay ? 'color: #333;font-weight: bold;' : ''">
								<text>{{workTime.getEndDay || '请选择'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
			</picker>
			
			<picker mode="selector" :range="timeList" range-key="title" :data-type="3" @change="workTimeChange">
					<view class="choice-item">
						<view class="choice-item-left">
							<text>收货起始时间</text>
						</view>
						<view class="choice-item-right">
							<view class="right-title" :style="workTime.getStartTime ? 'color: #333;font-weight: bold;' : ''">
								<text>{{workTime.getStartTime || '请选择'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
			</picker>
			
			<picker mode="selector" :range="timeList" range-key="title" :data-type="4" @change="workTimeChange">
					<view class="choice-item">
						<view class="choice-item-left">
							<text>收货结束时间</text>
						</view>
						<view class="choice-item-right">
							<view class="right-title" :style="workTime.getEndTime ? 'color: #333;font-weight: bold;' : ''">
								<text>{{workTime.getEndTime || '请选择'}}</text>
							</view>
							<view class="right-icon">
								<image src="/static/images/right1.png" mode="widthFix"></image>
							</view>
						</view>
					</view>
			</picker>
			<!-- <view class="list-item">
				<view class="list-item-left">
					<text>收件人上下班时间</text>
				</view>
				<view class="list-item-right">
					<view class="input">
						<input type="text" v-model="formData.send" placeholder="请输入" placeholder-style="color:#999;font-size:28rpx;">
					</view>
				</view>
			</view> -->
		</view>
		
		<view class="orderRemark" v-if="selectedChannel.Channeltime">
			{{selectedChannel.Channeltime}}
		</view>

		<view class="bottom-btn" @click="submitConfirm">
			<text>{{this.id ? '确认' : '确认急发'}}</text>
		</view>
		<u-popup :show="popupShow" @close="popupShow = false" :round="14" closeable>
			<view class="popup-title">
				<text>附加服务</text>
			</view>
			<scroll-view scroll-y="true" class="popup-list">
				<view class="popup-list-content">
					<view class="popup-list-item" :style="item.selected ? 'border: 2rpx solid #FF3023;' : ''" v-for="(item, index) in additionalList" :key="index" @click="additionalSelect(index)">
						<view class="popup-left">
							<text>{{item.name}}</text>
						</view>
						<view class="popup-right">
							<view class="right-price">
								<text>￥{{item.price}}</text>
							</view>
							<view class="right-image">
								<image :src="item.selected ? '/static/images/radio1.png' : '/static/images/radio2.png'" mode="widthFix"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-notice">
					<text>注：打木架实报实销，多退少补</text>
				</view>
			</scroll-view>
			
		</u-popup>
	</view>
</template>

<script>
	import {getQuantityGoodsType} from '@/api/goods.js';
	import {getFaceList, getBaseList, getChannelList} from '@/api/index.js';
	import {getOrderAdditionalChargesList, getPayTypeList, pickExpressAcuteOrderInsertOrEdit, expressOrderDetail, transportationTypeList, channelTypeList} from '@/api/order.js';
	
	export default {
		data() {
			return {
				id: 0,
				info: {},
				formData: {
					is_pc: 1,
					typeroad: 2,
					declaration: 2,
					declaration_list: '',
					acting_mat_fee: '',
					// send: ''
				},
				declarationrow:1,
				goodsInfo: {
					good_pic: '',
					logistics_number: '',
					good_type: '',
					good_size: '',
					good_number: '',
					good_quantity: ''
				},
				imageList: [],
				collectPeople: {},
				warehouseList: [],
				selectedWarehouse: {},
				transTypeList: [],
				selectedTransType: {},
				channelList: [],
				selectedChannel: {},
				additionalList: [],
				declarationList:[
					{
						title: '不包税',
						key: '1'
					},
					{
						title: '简易报关',
						key: '1-4'
					},
					{
						title: '正式报关',
						key: '1-2'
					}
				],
				payTypeList: [],
				selectPayTypeName: '',
				workTime:{
					takePhoto:0,
					getStartDay:0,
					getEndDay:0,
					getStartTime:0,
					getEndTime:0,
				},
				timeList:[
					{
						id:1,
						title:'08:00'
					},
					{
						id:2,
						title:'09:00'
					},
					{
						id:3,
						title:'10:00'
					},
					{
						id:4,
						title:'11:00'
					},
					{
						id:5,
						title:'12:00'
					},
					{
						id:6,
						title:'13:00'
					},
					{
						id:7,
						title:'14:00'
					},
					{
						id:8,
						title:'15:00'
					},
					{
						id:9,
						title:'16:00'
					},
					{
						id:10,
						title:'17:00'
					},
					{
						id:11,
						title:'18:00'
					},
					{
						id:12,
						title:'19:00'
					},
					{
						id:13,
						title:'20:00'
					},
					{
						id:14,
						title:'21:00'
					},
					{
						id:15,
						title:'22:00'
					}
				],
				weekList:[
					{
						id:1,
						title:'星期一'
					},
					{
						id:2,
						title:'星期二'
					},
					{
						id:3,
						title:'星期三'
					},
					{
						id:4,
						title:'星期四'
					},
					{
						id:5,
						title:'星期五'
					},
					{
						id:6,
						title:'星期六'
					},
					{
						id:7,
						title:'星期日'
					},
				],
				popupShow:false,
				helpShow:false,
				newPlaceholder:'请输入',//输入框的内容
			}
		},
		async onLoad(options) {
			uni.$on('selectAddress', data => {
				this.collectPeople = data;
			});
			if (options.id) {
				this.id = options.id;
			}
			await this.loadData();
			await this.getTransportationType()
		},
		onUnload() {
			uni.$off('selectAddress');
		},
		computed: {
			channelDisabled() {
				return !this.selectedWarehouse.warehouse_id || !this.selectedTransType.id;
			},
			additionalSelectedTitle() {
				let list = this.additionalList.filter(item => item.selected);
				if (!list || !list.length) {
					return '';
				}
				list = list.map(item => `${item.name} ￥${item.price}`);
				return list.join(',');
			}
		},
		methods: {
			async getTransportationType() {
				try{
					let res = await transportationTypeList({type:1});
					if(res.status === 200){
						this.transTypeList = res.data
					}
				}catch(e){}
			},
			
			async submitConfirm() {
				try{
					if (!this.goodsInfo.logistics_number) {
						throw new Error('请输入快递单号');
					}
					if (!this.goodsInfo.good_size) {
						throw new Error('请输入件数');
					}
					if (!this.goodsInfo.good_quantity) {
						throw new Error('请输入品名');
					}
					if (!this.goodsInfo.good_number) {
						throw new Error('请输入数量');
					}
					if (!this.goodsInfo.good_type) {
						throw new Error('货物类型异常');
					}
					if (!this.selectedWarehouse.warehouse_id) {
						throw new Error('请选择仓库');
					}
					if (!this.selectedTransType.id) {
						throw new Error('请选择运输方式');
					}
					if (!this.selectedChannel.channel_id) {
						throw new Error('请选择渠道');
					}
					if (!this.collectPeople.consignee) {
						throw new Error('请选择收件人地址');
					}
					if (this.formData.declaration == 1) {
						if (!this.formData.declaration_list) {
							throw new Error('请选择不包税类型');
						}
					} else {
						this.formData.declaration_list = '';
					}
					if (!this.selectPayTypeName) {
						throw new Error('请选择支付方式');
					}
					for (const i in this.workTime) {
					    if(!this.workTime[i]){
							throw new Error('请输入上下班时间');
					    }
					}
					// if (!this.formData.send) {
					// 	throw new Error('请输入上下班时间');
					// }
					let data = this.formData;
					
					data.type = this.selectedTransType.id;
					data.channel_id = this.selectedChannel.channel_id;
					data.warehouse = this.selectedWarehouse.warehouse_id;
					data.play = this.selectPayTypeName;
					data.pick_address = [this.collectPeople.province, this.collectPeople.city, this.collectPeople.district, this.collectPeople.address].join(' ');
					data.pick_name = this.collectPeople.consignee;
					data.pick_phone = this.collectPeople.mobile;
					data.extra_fee = this.additionalList.filter(item => item.selected).map(item => item.id).join(',');
					if(data.declaration != 2){
						data.declarationrow = this.declarationrow
					}
					// data.send = `（1）无人签收放门口拍照 :${this.workTime.takePhoto == 1?'是':'否'}。（2）收货工作日：${this.workTime.getStartDay} 到 ${this.workTime.getEndDay}  （3）收货时间：${this.workTime.getStartTime}-${this.workTime.getEndTime}`
					data.send = `${this.workTime.getStartTime}-${this.workTime.getEndTime} , ${this.workTime.getStartDay} 到 ${this.workTime.getEndDay} , ${this.workTime.takePhoto == 1?'无人签收可放门口拍照':'无人不可放门口'}`
					data.good = [
						{
							cargo: [
								this.goodsInfo
							]
						}
					];
					if (this.id) {
						data.order_id = this.id;
						data.good[0].id = this.info.good_address_lift_id;
					}
					let res = await pickExpressAcuteOrderInsertOrEdit(data);
					uni.showToast({
						title: res.msg || '操作成功',
						icon: 'none',
						mask: true
					});
					if (this.id) {
						this.$msx.prevPage().pullOrderList();
						setTimeout(() => uni.navigateBack(), 1000);
						return;
					}
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/order/order?type=notWarehousing&orderTypeSelectedIndex=2&tabsIndex=0'
						});
					}, 1000);
				}catch(e){
					console.log(e);
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			payTypeSelect(item) {
				this.selectPayTypeName = item.pay_name;
			},
			additionalSelect(index) {
				this.additionalList[index].selected = !this.additionalList[index].selected;
			},
			declarationListChange(item) {
				this.formData.declaration_list = item.key;
			},
			declarationChange(declaration) {
				if (declaration == 1) {
					this.formData.declaration_list = 1;
				} else {
					this.formData.declaration_list = '';
				}
				this.formData.declaration = declaration;
			},
			declarationrowChange(val){
				this.declarationrow = val
			},
			channelChange(event) {
				this.selectedChannel = this.channelList[event.detail.value];
				this.newPlaceholder = this.selectedChannel.Currencyname || ''
			},
			async loadpayTypeList() {
				try{
					let res = await getPayTypeList();
					this.payTypeList = res.data || [];
				}catch(e){
					//TODO handle the exception
				}
			},
			async loadAdditionalList() {
				try{
					let res = await getOrderAdditionalChargesList();
					this.additionalList = res.data.map(item => {
						item.selected = false;
						return item;
					});
				}catch(e){
				}
			},
			async transTypeChange(event) {
				this.selectedTransType = this.transTypeList[event.detail.value];
				await this.loadChannelList();
			},
			async warehouseChange(event) {
				this.selectedWarehouse = this.warehouseList[event.detail.value];
				await this.loadChannelList();
			},
			async loadData() {
				await this.loadWarehouseList();
				// await this.loadBaseList();
				await this.loadAdditionalList();
				await this.loadpayTypeList();
				await this.loadExpressOrderDetail();
			},
			async loadExpressOrderDetail() {
				try{
					if (!this.id) {
						return;
					}
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					let res = await expressOrderDetail(this.id);
					this.info = res.data;
					if (this.info.declaration == 2) {
						this.formData.declaration = this.info.declaration;
					} else {
						this.formData.declaration = 1;
						this.formData.declaration_list = this.info.declaration;
					}
					this.formData.acting_mat_fee = this.info.acting_mat_fee;
					this.formData.send = this.info.send;
					
					if (this.info.order_lift_address[0].good_pic) {
						this.imageList = [{src: this.info.order_lift_address[0].good_pic, path: this.info.order_lift_address[0].good_pic}];
					}
					
					this.goodsInfo.good_pic = this.info.order_lift_address[0].good_pic;
					this.goodsInfo.logistics_number = this.info.order_lift_address[0].logistics_number;
					this.goodsInfo.good_type = this.info.order_lift_address[0].good_type;
					this.goodsInfo.good_size = this.info.order_lift_address[0].good_size;
					this.goodsInfo.good_number = this.info.order_lift_address[0].good_number;
					this.goodsInfo.good_quantity = this.info.order_lift_address[0].good_quantity;

					let pickAddress = this.info.pick_address.split(' ');
					this.collectPeople = {
						province: pickAddress[0],
						city: pickAddress[1] || '',
						district: pickAddress[2] || '',
						address: pickAddress[3] || '',
						consignee: this.info.pick_name,
						mobile: this.info.pick_phone
					};
					
					this.warehouseList.every(item => {
						if (item.warehouse_id == this.info.warehouse_id) {
							this.selectedWarehouse = item;
							return false;
						}
						return true;
					});
					
					this.transTypeList.every(item => {
						if (item.id == this.info.type) {
							this.selectedTransType = item;
							return false;
						}
						return true;
					});
					
					await this.loadChannelList();
					this.channelList.every(item => {
						if (item.channel_id == this.info.channel_id) {
							this.selectedChannel = item;
							return false;
						}
						return ture;
					});
					
					let extraId = this.info.extra_fee.split(',');
					if (extraId && extraId.length) {
						this.additionalList = this.additionalList.map(item => {
							item.selected = extraId.includes(String(item.id));
							return item;
						});
					}
					
					this.selectPayTypeName = this.info.play;
				}catch(e){
					console.log(e);
				} finally {
					uni.hideLoading();
				}
			},
			channelSelectTap() {
				if (!this.selectedWarehouse.warehouse_id || !this.selectedTransType.id) {
					uni.showToast({
						title: '请先选择仓库和运输方式',
						icon: 'none'
					});
				}
			},
			async loadChannelList() {
				try{
					if (!this.selectedWarehouse.warehouse_id || !this.selectedTransType.id) {
						this.channelList = [];
						this.selectedChannel = {};
						return;
					}
					let res = await channelTypeList({
						delivery_site_id: this.selectedWarehouse.delivery_site_id,
						type: this.selectedTransType.id
					});
					this.channelList = res.data || [];
				}catch(e){
					//TODO handle the exception
				}
			},
			async loadBaseList() {
				try{
					let res = await getBaseList();
					this.transTypeList = res.data?.trans_type || [];
				}catch(e){
					//TODO handle the exception
				}
			},
			async loadWarehouseList() {
				try{
					let res = await getFaceList();
					this.warehouseList = res.data?.warehouse || [];
				}catch(e){
					//TODO handle the exception
					console.log(e);
				}
			},
			selectAddress(mold) {
				let getParentId = this.selectedChannel.parent_id || ''
				uni.navigateTo({
					url: `/pages/address/index?type=select&mold=${mold}&ParentId=${getParentId}`
				});
			},
			async goodsQuantityInput() {
				try{
					if (!this.goodsInfo.good_quantity) {
						this.goodsInfo.good_type = '';
						return;
					}
					let res = await getQuantityGoodsType(this.goodsInfo.good_quantity);
					this.goodsInfo.good_type = res?.goods_type?.name || '';
				}catch(e){
					//TODO handle the exception
				}
			},
			imageChange(images) {
				this.goodsInfo.good_pic = images[0]?.src || '';
			},
			takePhotoChange(val){
				this.workTime.takePhoto = val
			},
			workTimeChange(e){
				let name = ''
				let arr = []
				switch (e.currentTarget.dataset.type){
					case 1:
						name='getStartDay'
						arr = this.weekList
						break;
					case 2:
						name='getEndDay'
						arr = this.weekList
						break;
					case 3:
						name='getStartTime'
						arr = this.timeList
						break;
					case 4:
						name='getEndTime'
						arr = this.timeList
						break;
					default:
						break;
				}
				this.workTime[name] = arr[e.detail.value].title
			}
		}
	}
</script>

<style lang="scss">
.body{
	padding: 30rpx;
	box-sizing: border-box;
	
	.images {
		width: 100%;
		padding-bottom: 25rpx;
	}
	
	.order{
		width: 100%;
		padding:0 30rpx;
		box-sizing: border-box;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		.order-list{
			.order-item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #F5F5F5;
				&:last-child{
					border: none;
				}
				.order-item-left{
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
					margin-right: 30rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					max-width: 300rpx;
				}
				.order-item-right{
					flex: 1;
					
					.input{
						text-align: right;
						color: #333;
						font-weight: bold;
						font-size: 28rpx;
						flex: 1;
					}
					.order-right-select{
						display: flex;
						justify-content: flex-end;
						align-items: center;
						.select-text{
							font-size: 28rpx;
							color: #999;
							font-weight: 500;
							padding-right: 10rpx;
						}
						.select-icon{
							image{
								width: 12rpx;
								height: 20rpx;
							}
						}
					}
				}
			}
		}
		
	}
	.choice{
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		// .choice-item{
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;
		// 	padding: 30rpx 0;
		// 	border-bottom: 2rpx solid #F5F5F5;
		// 	&:last-child{
		// 		border: none;
		// 	}
		// 	.choice-item-left{
		// 		font-size: 28rpx;
		// 		color: #666;
		// 		font-weight: 500;
		// 		max-width: 300rpx;
		// 		margin-right: 30rpx;
		// 		overflow: hidden;
		// 		text-overflow: ellipsis;
		// 		white-space: nowrap;
		// 	}
		// 	.choice-item-right{
		// 		flex: 1;
		// 		display: flex;
		// 		justify-content: flex-end;
		// 		align-items: center;
		// 		.right-title{
		// 			font-size: 28rpx;
		// 			color: #999;
		// 			font-weight: 500;
		// 			padding-right: 14rpx;
		// 		}
		// 		.right-icon{
		// 			display: flex;
		// 			justify-content: center;
		// 			align-items: center;
		// 			image{
		// 				width: 12rpx;
		// 				height: 20rpx;
		// 			}
		// 		}
		// 	}
		// }
	}
	.choice-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #F5F5F5;
		&:last-child{
			border: none;
		}
		.choice-item-left{
			font-size: 28rpx;
			color: #666;
			font-weight: 500;
			max-width: 300rpx;
			margin-right: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.choice-item-right{
			flex: 1;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.right-title{
				font-size: 28rpx;
				color: #999;
				font-weight: 500;
				padding-right: 14rpx;
			}
			.right-icon{
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 12rpx;
					height: 20rpx;
				}
			}
		}
	}
	.top{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding-top: 30rpx;
		margin-top: 20rpx;
		.top-item{
			
			.item-top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 30rpx;
				box-sizing: border-box;
				.item-top-left{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.item-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 48rpx;
							height: 48rpx;
						}
					}
					.item-name{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
						padding-left: 14rpx;
					}
				}
				.item-top-right{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 144rpx;
					height: 52rpx;
					border-radius: 28rpx;
					border: 2rpx solid #E9E9E9;
					.right-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 24rpx;
							height: 26rpx;
						}
					}
					.right-title{
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #333;
						font-weight: bold;
					}
				}
			}
			.item-center{
				width: 100%;
				padding-left: 24rpx;
				padding-top: 12rpx;
				box-sizing: border-box;
				.center-detail{
					padding: 0 30rpx 32rpx 36rpx;
					box-sizing: border-box;
					
					.center-address{
						font-size: 26rpx;
						color: #666;
						font-weight: 500;
						line-height: 40rpx;
					}
					.center-info{
						margin-top: 14rpx;
						background: #F5F5F5;
						border-radius: 12rpx;
						padding: 24rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						.info-left{
							font-size: 26rpx;
							color: #666;
							font-weight: 500;
						}
						.info-right{
							display: flex;
							justify-content: flex-end;
							align-items: center;
							.right-text{
								font-size: 26rpx;
								color: #333;
								font-weight: bold;
								padding-right: 8rpx;
							}
							.right-image{
								display: flex;
								justify-content: center;
								align-items: center;
								image{
									width: 12rpx;
									height: 20rpx;
								}
							}
						}
					}
					.center-hr{
						width: 100%;
						height: 2rpx;
						background-color: #F5F5F5;
						margin-top: 32rpx;
					}
				}
			}
		}
		
	}
	.list{
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.list-help{
			position: relative;
			.top-help-mask{
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				z-index: 11;
			}
			.help-content{
				width: 100%;
				position: absolute;
				top: -30rpx;
				z-index: 15;
				padding: 36rpx 0 0 24rpx;
				box-sizing: border-box;
				image{
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					z-index: 1;
				}
				.help-title{
					position: relative;
					z-index: 2;
					font-size: 26rpx;
					color: #fff;
				}
				.help-item{
					padding-top: 10rpx;
					position: relative;
					z-index: 2;
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					padding-right: 12rpx;
					box-sizing: border-box;
					font-size: 26rpx;
					color: #FFF;
					.help-left{
						width: 23%;
					}
					.help-right{
						width: 76%;
					}
				}
			}
		}
		.list-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx 0;
			box-sizing: border-box;
			
			.list-top-left{
				display: flex;
				justify-content: flex-start;
				overflow: hidden;
				max-width: 260rpx;
				margin-right: 30rpx;
				
				.top-text{
					padding-right: 10rpx;
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.top-image{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
			.list-top-right{
				flex: 1;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.select{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					margin-left: 60rpx;
					.select-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 28rpx;
							height: 28rpx;
						}
					}
					.select-title{
						font-size: 28rpx;
						color: #999;
						font-weight: 500;
						margin-left: 6rpx;
					}
				}
			}
		}
		.list-label{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 0;
			.label-item-active{
			
			}
			.label-item{
				position: relative;
				width: 200rpx;
				height: 60rpx;
				border-radius: 12rpx;
				border: 2rpx solid #E9E9E9;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				overflow: hidden;
				.label-select{
					position: absolute;
					right: -1rpx;
					top: -1rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.list-item{
			padding: 30rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&:last-child{
				border: none;
			}
			.list-item-left{
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
				overflow: hidden;
				max-width: 300rpx;
				text-overflow: ellipsis;
				margin-right: 230rpx;
				white-space: nowrap;
			}
			
			.list-item-right{
				flex: 1;
				padding-left: 30rpx;
				box-sizing: border-box;
				overflow: hidden;
				
				.input{
					text-align: right;
					color: #333;
					font-size: 28rpx;
					font-weight: 500;
				}
				.right-centent{
					width: 100%;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					overflow: hidden;
					
					.right-text{
						font-size: 28rpx;
						color: #999;
						font-weight: 500;
						padding-right: 14rpx;
						flex: 1;
						overflow: hidden;
						box-sizing: border-box;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-align: right;
					}
					
					.right-icon{
						display: flex;
						justify-content: center;
						align-items: center;
						image{
							width: 12rpx;
							height: 20rpx;
						}
					}
				}
			}
		}
		.item-pay{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 18rpx 0;
			.pay-left{
				font-size: 28rpx;
				color: #666;
				font-weight: 500;
			}
			.pay-right{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.pay-btn{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 160rpx;
					height:  60rpx;
					border: 2rpx solid #E9E9E9;
					background: #F5F5F5;
					color: #666;
					font-weight: 500;
					border-radius: 30rpx;
					font-size: 28rpx;
					box-sizing: border-box;
					margin-right: 15rpx;
				}
				
				.pay-btn:last-of-type {
					margin-right: 0;
				}
				
				.pay-btn.active {
					background: linear-gradient(55deg, #E6201A 0%, #FF3023 100%);
					color: #FFF;
					font-weight: bold;
				}
			}
		}
	}
	
	//订单备注
	.orderRemark{
		margin-top: 20rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		color: red;
		font-size: 14px
	}

	.bottom-btn{
		margin-top: 30rpx;
		width: 100%;
		height: 88rpx;
		background: #E82E2E;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #FFF;
		font-weight: bold;
	}
}
.popup-title{
	padding: 22rpx 0;
	text-align: center;
	font-size: 32rpx;
	color: #2F3133;
	font-weight: bold;
	border-bottom: 2rpx solid #F0F0F0;
}
.popup-list{
	width: 100%;
	height: 500rpx;
	.popup-list-content{
		width: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		padding: 30rpx;
		box-sizing: border-box;
		.popup-list-item{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 336rpx;
			padding: 28rpx 20rpx;
			box-sizing: border-box;
			background: #F5F5F5;
			border-radius: 12rpx;
			border: 2rpx solid #F5F5F5;
			margin-right: 18rpx;
			margin-bottom: 18rpx;
			&:nth-child(2n){
				margin-right: 0;
			}
			.popup-left{
				font-size: 30rpx;
				color: #2F3133;
				font-weight: bold;
			}
			.popup-right{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.right-price{
					font-size: 30rpx;
					color: #2F3133;
					font-weight: bold;
					padding-right: 20rpx;
				}
				.right-image{
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 44rpx;
						height: 44rpx;
					}
				}
			}
		}
	}
	.popup-notice{
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #999;
		font-weight: 500;
	}
}
</style>
